<template>
    <div class="container" style="background:white">
        <div class="row">
            <div class="col-md-12">
                <header>
                    <h1>小微博客</h1>
                </header>
            </div>
        </div>
        <div class="row">
            <div class="col-md-offset-3 col-md-6 col-sm-12">
                <h2>注册</h2>
                <!--表单-->
                <form class="form-horizontal" @submit.prevent="register">
                    <div class="form-group">
                        <label for="nickName" class="col-sm-2 control-label">昵称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入昵称"
                                v-model="nickName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="loginName" class="col-sm-2 control-label">登陆名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" placeholder="请输入登陆名"
                                v-model="loginName">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" placeholder="请输入密码"
                                v-model="password">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="photo" class="col-sm-2 control-label">照片</label>
                        <div class="col-sm-10">
                            <input type="file" class="form-control" @change="handleFileUpload">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-default">注册</button>
                        </div>
                    </div>
                </form>
                <!--END表单-->
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <!--面板-->
                <!-- <div class="panel panel-default" style="margin-top:10px">
                    <div class="panel-body text-center">
                        hiweibo xda.cn<br />
                        Designed by fan wu
                    </div>
                </div> -->
                <!--END 面板-->
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
    setup() {
        const state = reactive({
            nickName: '',
            loginName: '',
            password: '',
            photo: null
        });

        const router = useRouter();

        function handleFileUpload(event) {
            state.photo = event.target.files[0];
        }

        function register() {
            const formData = new FormData();
            formData.append('nickName', state.nickName);
            formData.append('loginName', state.loginName);
            formData.append('password', state.password);
            formData.append('photo', state.photo);

            axios
                .post('http://localhost:81/xw01/xw-user/api/user/reg', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                })
                .then(res => {
                    console.log(res);
                    console.log(res.data);
                    if (res.data.code === 200) {
                        alert("注册成功");
                        router.push('/'); // 注册成功后跳转到登录页面
                    } else {
                        alert("注册失败: " + res.data.message);
                    }
                })
                .catch(err => {
                    console.log(formData.data);
                    console.error(err);
                    alert("注册失败: 网络错误或服务器无响应");
                });
        }

        return {
            ...toRefs(state),
            handleFileUpload,
            register,
        }
    }
}
</script>
